<template>
	<view class="">
		<view class="BaseSearch">
			<view class="left" v-if="showLeft" @click="selectitem">
				<view>{{zhi}}</view>
				<image src="https://fangguaner.wm76.mtnet.ren/static/applet/image/xiala1.png" />
			</view>
			<view class="right">
				<image src="https://fangguaner.wm76.mtnet.ren/static/applet/image/search.png" mode="widthFix" />
				<input type="text" placeholder="请输入搜索内容" @input="sousuo">
			</view>

		</view>
		<view class="cont" v-if="showlast" >
			<view class="conts" v-for="(item,index) in arr" :key="index" @click="pricebtn(item.text)">
				{{item.text}}
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		props: {
			showLeft: {
				type: Boolean,
				default: true
			},
			arr:{
				type:Array,
				default:[]
			},
			showlast:{
				type:Boolean,
				default:false
			},
			zhi:{
				type:String,
				default:""
			}
		},
		data(){
			return{
			}
		},
		methods:{
			selectitem(){
				this.$emit('selectitem',this.zhi)
			},
			pricebtn(item){
				// this.zhi=item
				this.$emit('pricebtn',item)
			},
			sousuo(){
				this.$emit('sousuo')
			}
		}
	}
</script>

<style scoped lang="less">
	.BaseSearch {
		background-color: #ffffff;
		border-radius: 10rpx;
		border: solid 2rpx #dfdfdf;
		height: 80rpx;
		display: flex;

		.left {
			width: 144rpx;
			// border: 1px solid red;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 0 10rpx;
			box-sizing: border-box;
			position: relative;

			image {
				width: 12rpx;
				height: 10rpx;
			}
		}

		.left::after {
			content: "";
			position: absolute;
			width: 1rpx;
			height: 27rpx;
			background-color: #cccccc;
			right: 0;
			top: 28rpx;
		}

		.right {
			width: 100%;
			//   border: 1px solid red;
			background-color: #ffffff;
			padding: 0 21rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;

			image {
				width: 37rpx;
				height: 38rpx;
			}

			input {
				padding-left: 20rpx;
			}
		}
	}
	.cont{
		width: 126rpx;
		position: absolute;
		top: 110rpx;
		z-index: 1000000;
		.conts{
			text-align: center;
			line-height: 50rpx;
			background-color:#FFFFFF;
		}
	}
</style>
